<template>
	<view class="navbar">
		<view class="navbar-fixed">
			<!-- 状态栏 -->
			<view :style="{height: statusBarHeight+'px'}"></view>
			<view class="navbar-content" :style="{height:naviBarHeight+'px',width:windowwidth+'px'}">
				<view class="navbar-search">
					<view class="navbar-search-sousuo">
					<text class="iconfont icon-sousuo" size="16" color="#999" @tap="searchFn"></text>
					<input v-on:input="input_name($event.target.value)" placeholder="搜索丽香茶叶" class="navbar-searche-text"/>
					</view>
					<view class="navibar-search-icon" @click="searchCh()"><text>搜索</text></view>
					<!-- <view class="navbar-searche-text">搜索丽香茶叶</view> -->
					
				</view>
			</view>
		<!-- 导航栏,浏览器中忽略了上方状态栏的高度 -->			
		</view>
		<!-- 顶下去 -->
		<view :style="{height: statusBarHeight+naviBarHeight+'px' }"></view>
		
	</view>
</template>

<script>
	export default {
		// props: {
		//       searchFn: {
		//         type: Function,
		//         default: null
		//       }
		// },
		data() {
			return {
				statusBarHeight:20,
				windowwidth:375,
				naviBarHeight:45
			};
		},
		created(){
			//获取手机系统信息
			const info = uni.getSystemInfoSync()
			//console.log(info);
			//设置状态栏高度
			this.statusBarHeight=info.statusBarHeight
			this.windowwidth=info.windowHeight
			
			console.log(this.windowwidth)
			//获取胶囊的位置
			//h5 app mp-ali
			//#ifndef H5 || APP-PLUS || MP-ALIPAY
			const menuBtnInfo =	uni.getMenuButtonBoundingClientRect()
			console.log(menuBtnInfo)
			//（胶囊底部高度-状态栏高度）+（胶囊顶部高度-状态栏高度）=导航栏高度
			this.naviBarHeight=(menuBtnInfo.bottom-info.statusBarHeight)+(menuBtnInfo.top-info.statusBarHeight)
			
			console.log(this.naviBarHeight)
			this.windowwidth=menuBtnInfo.left
			//#endif
		},
		methods:{
			input_name(e) {
			     this.$emit("input", e);
			},
			searchCh(){
				 // this.$emit('searchFn');
				 //有两个父组件
				 this.$parent.searchFn()
				 // console.log("子组件搜索方法")
			}
		}
	}
</script>

<style lang="scss">

	.navbar{
		.navbar-fixed{
			//固定导航栏的位置
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99;
			//保证导航栏在最上方
			width: 100%;
			background-color: $mk-base-color;
			
			background-color:#8eb981;
			
			.navbar-content{
				display: flex;
				justify-content: center;
				align-items: center;
				//在盒内显示
				box-sizing: border-box;
				padding: 0 15px;
				//内容高度也要适应手机系统
				height: 45px;
				.navbar-search{
					display: flex;
					align-items: center;
					padding-left: 15px;
					width: 100%;
					height: 30px;
					//上下左右
					border-radius: 30px;
					background-color: #fff;
					justify-content: space-between;
					.navbar-search-sousuo{
						display: flex;
						align-items: center;
						.navbar-searche-text{
							font-size: 12px;
							color:#C0C0C0;
						}
					}
					.navibar-search-icon{			
						height: 100%;
					    padding-right: 15px;
					    color: #28660a;
						align-items: center;
						line-height: 2;
					}
					
				}
			}		
		}
	}
</style>
